<template>
  <div class="add-accuse">
    <!-- 举报人信息 -->
    <el-row>
      <span>举报人信息</span>
    </el-row>
    <p>其中带*为必填项</p>
    <!-- 匿名选择 -->
    <el-row>
      <el-col :span="6">是否匿名举报</el-col>
      <el-col :span="18">
        <el-switch
          v-model="isAnony"
          active-text="是"
          inactive-text="否"
        >
        </el-switch>
      </el-col>
    </el-row>
    <!-- 联系方式 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        联系方式(手机)
      </el-col>
      <el-col :span="18">
        <el-input
          placeholder="请输入"
          v-model="person.phone"
        ></el-input>
      </el-col>
      <p v-show="error.phone">请输入正确的手机号码</p>
    </el-row>
    <!-- 姓名 -->
    <el-row v-show="!isAnony">
      <el-col :span="6">
        <em>*</em>
        举报人姓名
      </el-col>
      <el-col :span="18">
        <el-input
          placeholder="请输入"
          v-model="person.name"
        ></el-input>
      </el-col>
      <p v-show="error.name">请输入姓名</p>
    </el-row>
    <!-- 举报人单位 -->
    <el-row v-show="!isAnony">
      <el-col :span="6">
        <em>*</em>
        举报人单位
      </el-col>
      <el-col :span="18">
        <el-input
          placeholder="请输入"
          v-model="person.comp"
        ></el-input>
      </el-col>
      <p v-show="error.comp">请输入单位</p>
    </el-row>

    <!-- 被举报人信息 -->
    <el-row>
      <span>被举报人信息</span>
    </el-row>
    <p>其中带*为必填项</p>
    <!-- 被举报人姓名 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        被举报人姓名
      </el-col>
      <el-col :span="18">
        <el-input
          placeholder="请输入"
          v-model="accuse.name"
        ></el-input>
      </el-col>
      <p v-show="error.aname">请输入姓名</p>
    </el-row>
    <!-- 被举报人单位 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        被举报人所属单位
      </el-col>
      <el-col :span="18">
        <el-select
          v-model="accuse.company"
          placeholder="请选择"
        >
          <el-option
            v-for="item in companyOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <p v-show="error.company">请输入单位职务</p>
    </el-row>
    <!-- 被举报人职务 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        被举报人单位职务
      </el-col>
      <el-col :span="18">
        <el-select
          v-model="accuse.job"
          placeholder="请选择"
        >
          <el-option
            v-for="item in jobOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <p v-show="error.job">请输入单位职务</p>
    </el-row>
    <!-- 被举报人职级 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        被举报人单位职级
      </el-col>
      <el-col :span="18">
        <el-select
          v-model="accuse.rank"
          placeholder="请选择"
        >
          <el-option
            v-for="item in rankOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <p v-show="error.rank">请选择单位职级</p>
    </el-row>
    <!-- 被举报人政治面貌 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        被举报人政治面貌
      </el-col>
      <el-col :span="18">
        <el-select
          v-model="accuse.status"
          placeholder="请选择"
        >
          <el-option
            v-for="item in statusOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <p v-show="error.status">请选择政治面貌</p>
    </el-row>

    <!-- 被举信息 -->
    <el-row>
      <span>检举相关信息</span>
    </el-row>
    <p>其中带*为必填项</p>
    <!-- 举报类型 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        举报类型
      </el-col>
      <el-col :span="18">
        <!-- 举报类型下拉 -->
        <el-select
          v-model="accuse.type"
          placeholder="请选择"
          @change="firstSelectChange"
        >
          <el-option
            v-for="item in typeOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 控告——违反的具体类型下拉 -->
        <el-select
          v-model="accuse.accuse"
          placeholder="请选择"
          v-show="accuse.type==1"
          @change="secondSelectChange"
        >
          <el-option
            v-for="item in accuseTypeOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 六大纪律——违反的具体纪律下拉 -->
        <el-select
          v-model="accuse.discip"
          placeholder="请选择"
          v-show="accuse.accuse==1&&accuse.type==1"
        >
          <el-option
            v-for="item in discipTypeOpt"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <!-- 举报内容 -->
    <el-row>
      <el-col :span="6">
        <em>*</em>
        举报内容
      </el-col>
      <el-col :span="18">
        <el-input
          placeholder="请输入"
          v-model="accuse.desc"
          type="textarea"
        ></el-input>
      </el-col>
    </el-row>
    <!-- 上传附件 -->
    <el-row>
      <el-col :span="6">
        上传附件
      </el-col>
      <el-col :span="18">
        <el-button
          icon="el-icon-upload2"
          circle
        ></el-button>
      </el-col>
    </el-row>
    <!-- 提交按钮 -->
    <el-row>
      <el-col :span="24">
        <el-button
          type="primary"
          size="medium"
          @click="subInfo"
        >提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AddAccuse',
  data() {
    return {
      isAnony: true, // 是否匿名
      // 举报人信息
      person: {
        phone: '',
        name: '',
        comp: '',
      },
      // 被举报人信息
      accuse: {
        name: '',
        company: '',
        job: '',
        rank: '',
        status: '',
        type: '', // 举报类型 一级
        accuse: '', // 举报类型 二级
        discip: '', // 举报类型 三级
        desc: '',
      },
      // 校验
      error: {
        phone: false,
        name: false,
        comp: false,
        company: false,
        aname: false,
        job: false,
        rank: false,
        status: false,
        type: false,
      },
      // 单位下拉
      companyOpt: [
        {
          value: 1,
          label: '人事部'
        }, {
          value: 2,
          label: '法务部'
        },
        {
          value: 3,
          label: '后勤部'
        },
      ],
      // 职务下拉选择
      jobOpt: [
        {
          value: 1,
          label: '财务主任'
        }, {
          value: 2,
          label: '法务主任'
        },
        {
          value: 3,
          label: '后勤主任'
        },
      ],
      // 职级下拉选择
      rankOpt: [
        {
          value: 1,
          label: '初级'
        }, {
          value: 2,
          label: '中级'
        },
        {
          value: 3,
          label: '高级'
        },
      ],
      // 政治面貌下拉选择
      statusOpt: [
        {
          value: '党员',
          label: '党员'
        }, {
          value: '群众',
          label: '群众'
        },
      ],
      // 举报类型选择
      typeOpt: [
        {
          value: 1,
          label: '检举控告类'
        }, {
          value: 2,
          label: '申诉类'
        }, {
          value: 3,
          label: '批评建议'
        },
      ],
      // 举报控告分类选择
      accuseTypeOpt: [
        {
          value: 1,
          label: '违反六大纪律'
        }, {
          value: 2,
          label: '违反八项规定'
        }, {
          value: 3,
          label: '涉法行为'
        },
      ],
      // 六大纪律下拉选择
      discipTypeOpt: [
        {
          value: 1,
          label: '违反政治纪律'
        }, {
          value: 2,
          label: '违反组织纪律'
        }, {
          value: 3,
          label: '违反廉洁纪律'
        }, {
          value: 4,
          label: '违反群众纪律'
        }, {
          value: 5,
          label: '违反工作纪律'
        }, {
          value: 6,
          label: '违反生活纪律'
        },
      ],
    }
  },
  methods: {
    // 提交举报信息
    subInfo() {
      // 匿名举报校验
      if (this.isAnony) {
        this.person.phone ? this.error.phone = false : this.error.phone = true
      } else {
        // 实名举报校验
        this.person.phone ? this.error.phone = false : this.error.phone = true
        this.person.name ? this.error.name = false : this.error.name = true
        this.person.comp ? this.error.comp = false : this.error.comp = true
      }
    },
    // 举报类型一级下拉改变
    firstSelectChange() {
      this.accuse.accuse = ''
      this.accuse.discip = ''
    },
    // 举报类型二级下拉改变
    secondSelectChange() {
      this.accuse.discip = ''
    }
  }
}
</script>

<style scoped lang="less">
.add-accuse {
  width: 100%;
  height: 100%;
  > p {
    font-size: 14px;
    color: #ff4949;
    margin-top: 0px;
    margin-bottom: 20px;
  }
  .el-row {
    display: flex;
    align-items: center;
    position: relative;
    span {
      font-weight: bold;
    }
    .el-col {
      color: #1a1a1a;
      display: flex;
      align-items: center;
      position: relative;
      em {
        color: #ff4949;
        font-weight: bold;
        font-style: normal;
        position: absolute;
        left: -8px;
      }
      &:last-child {
        justify-content: flex-end;
      }
    }
    & + .el-row {
      margin-top: 20px;
    }
    > p {
      font-size: 14px;
      color: #ff4949;
      position: absolute;
      bottom: -33px;
      right: 0px;
    }
    .el-button {
      margin-bottom: 20px;
    }
  }
}
</style>
